<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字典管理</title>
    <script src="../../../resources/app/all.js" type="text/javascript"></script>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }
    </style>

</head>
<body>
<form class="layui-form  layui-form-pane" id="queryForm" lay-filter="query">
    <div class="layui-inline">
        <label class="layui-form-label">字典名称</label>
        <div class="layui-input-inline">
            <input type="text" name="dictName" lay-verify="required" autocomplete="off" placeholder="请输入字典名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">字典类型</label>
        <div class="layui-input-inline">
            <input type="text" name="dictType" lay-verify="required" autocomplete="off" placeholder="请输入字典类型"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">使用状态</label>
        <div class="layui-input-inline">
            <select name="status">
                <option value="">请选择状态</option>
                <option value="0">使用</option>
                <option value="1">停用</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-inline">
            <input type="text" name="queryTime" class="layui-input" id="test6" placeholder="请选择日期">
        </div>
    </div>
    <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-sm" data-type="query">搜索</button>
        <button type="reset" class="layui-btn layui-btn-sm">重置</button>
    </div>
</form>


<table class="layui-hide" id="table" lay-filter="table"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData"><i class="layui-icon layui-icon-addition"></i>新增字典</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm  layui-btn-disabled" id="editData" lay-event="editData"><i class="layui-icon layui-icon-edit"></i>修改</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm  layui-btn-disabled" id="delData" lay-event="delData"><i class="layui-icon layui-icon-delete"></i>删除</button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="exportData"><i class="layui-icon layui-icon-download-circle"></i>导出</button>
    </div>
</script>


<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="使用|停用" lay-filter="statusTpl" {{
           d.status== 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script>
    layui.use(['table', 'laydate'], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#test6'
            , range: '~'
        });
        let renderTable = function (obj) {
            layer.load();
            ToolUtil.POST({
                url: global.api_url + '/sys/sysDictType/page',
                data: JSON.stringify(obj),
                async: false,
                success: function (obj) {
                    if (obj && obj.code === '00') {
                        initData(obj.data);
                    } else if (obj.code === '98' || obj.code === '97') {
                        location.href = global.loginUrl;
                    } else {
                        layer.alert(obj.msg,{icon:5});
                    }
                }
            });

        };
        renderTable({});

        function initData(data) {
            table.render({
                elem: '#table',
                data: data.rows,
                toolbar: '#toolbar',
                defaultToolbar: [],
                title: '字典列表',
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'dictName', title: '字典名称'},
                    {
                        field: 'dictType', title: '字典类型', templet: function (d) {

                            return '<a  style="color: #00bbee" lay-event="dictUrl">' + d.dictType + '</a>';
                        }
                    },
                    {field: 'status', title: '使用状态', templet: '#switchTpl', align: 'center'},
                    {
                        field: 'createTime', title: '创建时间', templet: function (d) {
                            return formatDateTime(new Date(d.createTime));
                        }
                    },
                    {field: 'remark', title: '说明'},
                    {field: 'operation', title: '操作', templet: '#auth-state',}
                ]],
                page: {
                    layout: ['limit', 'limits', 'count', 'prev', 'page', 'next', 'skip'],
                    groups: 1,
                    first: false,
                    last: false,
                    limit:15,
                    limits: [15, 25, 35, 45, 55],
                    count: data.total
                },
                done: function (res, curr, count) {
                    layer.closeAll('loading');
                }
            });
        }

        //监听状态操作
        form.on('switch(statusTpl)', function (obj) {
            ToolUtil.PUT({
                url: global.api_url + '/sys/sysDictType/start',
                data: {id: obj.value},
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                async: false,
                success: function (obj) {
                    console.log(obj)
                    if (obj && obj.code === '00') {

                    } else if (obj.code === '98' || obj.code === '97') {
                        location.href = global.loginUrl;
                    } else {
                        layer.alert(obj.msg,{icon:5});
                    }
                }
            });
        });

        table.on('checkbox(table)', function (obj) {
            let checkStatus = table.checkStatus('table');
            if (checkStatus.data.length == 1) {
                $("#editData").removeClass("layui-btn-disabled")
            } else {
                $("#editData").addClass("layui-btn-disabled")
            }
            if (checkStatus.data.length != 0) {
                $("#delData").removeClass("layui-btn-disabled")
            } else {
                $("#delData").addClass("layui-btn-disabled")
            }

        });


        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;
            switch (obj.event) {
                case 'addData':
                    layer.open({
                        type: 2,
                        title: '新增字典',
                        maxmin: false,
                        data: {
                            id: 0,
                            act: "add",
                            data: undefined
                        },
                        shadeClose: false, // 点击遮罩关闭层
                        // area: ['800px', '600px'],
                        area: ['50%', '80%'],
                        content: 'edit.html'
                    });
                    break;
                case 'editData':
                    if (data.length === 1) {
                        layer.open({
                            type: 2,
                            title: '编辑字典',
                            maxmin: false,
                            data: {
                                id: data[0].id,
                                act: "edit",
                                data: data[0]
                            },
                            shadeClose: false, // 点击遮罩关闭层
                            // area: ['800px', '600px'],
                            area: ['60%', '80%'],
                            content: 'edit.html'
                        });
                    }
                    break;
                case 'delData':
                    if (data.length >= 1) {
                        layer.confirm('确定要删除' + data.length + '条数据吗?', {
                            btn: ['确定', '取消'] //按钮
                        }, function () {
                            let ids = []
                            layui.each(data, function (obj) {
                                ids.push(data[obj].id)
                            });
                            ToolUtil.DELETE({
                                url: global.api_url + '/sys/sysDictType/' + ids,
                                async: false,
                                success: function (obj) {
                                    if (obj && obj.code === '00') {
                                        active.query();
                                    } else if (obj.code === '98' || obj.code === '97') {
                                        location.href = global.loginUrl;
                                    } else {
                                        layer.alert(obj.msg,{icon:5});
                                    }
                                }
                            });
                            layer.closeAll();
                        });
                    }
                    break;
                case 'exportData':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                default:
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(table)', function (obj) {
            let data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定要删除[' + data.dictName + ']吗?', function (index) {
                    ToolUtil.DELETE({
                        url: global.api_url + '/sys/sysDictType/' + data.id,
                        async: false,
                        success: function (obj) {
                            if (obj && obj.code === '00') {
                                obj.del();
                            } else if (obj.code === '98' || obj.code === '97') {
                                location.href = global.loginUrl;
                            } else {
                                layer.alert(obj.msg,{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑字典',
                    maxmin: false,
                    data: {
                        id: data.id,
                        act: "edit",
                        data: data
                    },
                    shadeClose: false, // 点击遮罩关闭层
                    // area: ['800px', '600px'],
                    area: ['60%', '80%'],
                    content: 'edit.html'
                });
            } else if (obj.event === 'dictUrl') {
                let active = parent.active;
                active.tabAdd("/sys/sysDitcType/indexInfo.html", "111111", "字典数据");
                active.tabChange("111111");
                store.set('dictInfo', data);
            }
        });

        let active = {
            query: function () {
                let data = ToolUtil.FormJSON("queryForm");
                layui.each(data, function (key, value) {
                    if (value == undefined || value == "") {
                        delete data[key];
                    }
                });
                renderTable(data);
            }
        };

        $('#queryForm .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type].call(this);
        });


    });
</script>
</body>
</html>